<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <div class="mb-20">
            <!-- 查询参数 -->
            <pro-query
              :searchParam="searchParam.param"
              @on-search="search"
              @on-reset="onReset"
            ></pro-query>
          </div>
          <!-- 列表 -->
          <pro-table
            ref="tableRef"
            :fetch="fetch"
            :columns="columns"
            :operate="operate"
            :toolbar="toolbar"
            :param="state.param"
            :pagination="pagination"
          >
          </pro-table>
        </a-card>
      </a-col>
    </a-row>
  </page-layout>
</template>

<script>
import { message, modal } from "ant-design-vue";

import { page, remove, tree } from "@/api/module/course-code-manage";
import { filterEmptyByObject } from '@/tools/common'
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { reactive, createVNode, ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import dictEnum from "@/const/dict";
import { getDictByCodesReturnObj } from "@/tools/get-dict";
import moment from "moment";
import { useI18n } from "vue-i18n";

const removeKey = "remove";

export default {
  setup() {
    const { t } = useI18n();
    const tableRef = ref();

    const router = useRouter();

    const columns = [
      {
        title: t("course-code.label.school"),
        dataIndex: "schId",
        width: "100",
        key: "schId",
      },
      {
        title: t("course-code.label.subjectCategory"),
        dataIndex: "disciplineId",
        width: "100",
      },
      {
        title: t("course-code.label.courseCode"),
        dataIndex: "courseCode",
        width: "100",
      },
      {
        title: t("course-code.label.courseName"),
        dataIndex: "courseName",
        width: "100",
      },
    ];

    /// 数据来源 [模拟]
    const fetch = async (param) => {
      let response = await page(param);
      return {
        data: response.data.record,
        total: response.data.total,
      };
    };

    /// 删除配置
    const removeMethod = (record) => {
      modal.confirm({
        title: "您是否确定要删除此数据?",
        icon: createVNode(ExclamationCircleOutlined),
        okText: "确定",
        cancelText: "取消",
        onOk() {
          remove({ id: record.id }).then((response) => {
            if (response.success) {
              message
                .success({ content: "删除成功", key: removeKey, duration: 1 })
                .then(() => {
                  tableRef.value.reload();
                });
            } else {
              message.error({
                content: "删除失败",
                key: removeKey,
                duration: 1,
              });
            }
          });
        },
      });
    };

    /// 行操作
    const operate = [
      {
        label: t("button.edit"),
        event: function ({ id }) {
          router.push({
            path: "/university/course-code-manage/edit",
            query: { id: id },
          });
        },
      },
      {
        label: t("button.delete"),
        event: function (record) {
          removeMethod(record);
        },
      },
    ];

    const toolbar = [
      {
        code: "",
        label: t("button.newly"),
        type: "primary",
        event: (selectedRowKeys) => {
          handleAdd();
        },
      },
      // {code: '', label: t('button.batchImport'), type: '', event: (selectedRowKeys) => {
      //   handleExport()
      // }},
    ];

    const pagination = {
      pageNum: 1,
      pageSize: 10,
    };

    const state = reactive({
      selectedRowKeys: [],
      param: {},
      visibleSave: false,
      visibleEdit: false,
      visibleInfo: false,
      recordEdit: {},
      recordInfo: {},
      subjectList: [],
    });
    let dictLists = reactive({
      data: {
        sub: [],
      },
    });

    const searchParam = reactive({
      param: [],
    });

    const search = function (value) {
      state.param = {
        ...state.param,
        ...filterEmptyByObject(value),
      };
    };
    const onReset = function () {
      state.param = {};
    };

    const onSelectChange = (selectedRowKeys) => {
      state.selectedRowKeys = selectedRowKeys;
    };

    const closeSave = function () {
      state.visibleSave = false;
      tableRef.value.reload();
    };

    const closeEdit = function () {
      state.visibleEdit = false;
      tableRef.value.reload();
    };

    const closeInfo = function () {
      state.visibleInfo = false;
    };

    const handleAdd = () => router.push("/university/course-code-manage/add");
    const handleExport = () => {};

    const getSubjectPage = () => {
      return tree()
        .then((result) => {
          if (result.success) {
            state.subjectList = result.data ? result.data.map(item => {
              console.log('item: result', item);

              return item
            }) : [];
          }
        })
        .catch((err) => {
          console.log("err: ", err);
        });
    };

    onMounted(async () => {
      await getSubjectPage();
      searchParam.param = [
        {
          key: "schName",
          type: "input",
          label: t("course-code.label.school"),
          placeholder: t("placeholder.pleaseEnter"),
        },
        {
          key: "disciplineId",
          type: "selectTree",
          label: t("course-code.label.subjectCategory"),
          treeData: state.subjectList,
          replaceFields: {
            children: "child",
            title: "disciplineName",
            key: "id",
            value: "id",
          },
          placeholder: t("placeholder.pleaseSelect"),
        },
        {
          key: "courseCode",
          type: "input",
          label: t("course-code.label.courseCode"),
          placeholder: t("placeholder.pleaseEnter"),
        },
        {
          key: "courseName",
          type: "input",
          label: t("course-code.label.courseName"),
          hidden: true,
          placeholder: t("placeholder.pleaseEnter"),
        },
      ];
    });
    return {
      t,
      state,
      fetch,
      search,
      onReset,
      columns,
      operate,
      pagination,
      searchParam,
      onSelectChange,

      closeSave,
      closeEdit,
      closeInfo,

      handleAdd,
      tableRef,
      toolbar,
      handleExport,
    };
  },
};
</script>
